{% extends 'CaisseBundle::layout.html.twig' %} 
{% block body %} 

<div id="body_section">
    <div id="body_section_inner">
        <div class="contentPageWrapper">

            <!-- register form -->
            <div class="pageSectionMain ui-corner-all">
                <div class="pageSectionMainInternal">
                    <div id="pageHeader">
                        <h2>Liste des articles</h2>
                    </div>
                    <div>
                        <script>
                            $(document).ready(function() {
                                $('#fileData').dataTable({
                                    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                                    "sPaginationType": "full_numbers",
                                    "aaSorting": [[1, "desc"]],
                                    "iDisplayLength": 10,
                                    "bJQueryUI": true,
                                    "sDom": '<"H"frlT>t<"F"ip>',
                                    //<"H"T><"clear">
                                    //"sDom": '<"top"i>rt<"bottom"flp><"clear">',

                                    "oTableTools": {
                                        
                                        "aButtons": [
                                            // "copy",
                                            "csv",
                                            "xls",
                                            {
                                                "sExtends": "pdf",
                                                "sPdfOrientation": "landscape",
                                                "sPdfMessage": ""
                                            },
                                            "print"
                                        ]
                                    },
                                    "aoColumns": [
                                        {"bSortable": false},
                                        null,
                                        null,
                                        null,
                                        null,
                                        null,
                                        {"bSortable": false}
                                    ]

                                });

                            });

                        </script>

                        <p class="introText">
<span style="color:#F00;">Soyez très prudent lors de la suppression d'un article car cela supprimera toutes les commandes de cet article.</span>
                        <p>Pour ajouter un article <a href="{{path('caisse_ajout_article')}}">Cliquer içi</a></p>
                         
                        </p> 
                    </div>
                    <div class="clear"><!-- --></div>

                    <div>
                        <p class="introText">
                        <table id="fileData" width="100%" cellpadding="3" cellspacing="0">
                            <thead>
                            <th style="width: 40px; text-align: left;" class="ui-state-default">Image</th>
                            <th style="width: 120px; text-align: left;" class="ui-state-default">Nom d'article</th>
                            <th class="ui-state-default" style="text-align: left;">Description</th>
                            <th style="width: 120px; text-align: center;" class="ui-state-default">Catégorie</th>
                            <th style="width: 100px; text-align: center;" class="ui-state-default">Prix</th>
                            <th style="width: 110px; text-align: center;" class="ui-state-default">Disponibilité</th>
                            <th style="width: 60px; text-align: center;" class="ui-state-default" id="task">Action</th>
                            </thead>
                            <tbody>
                                 {% for article in articles %}
                                <tr> 
                            
                                    
                                   
                                
                                   
                                    <td class="txtLeft">
                                        <a class="ajax cboxElement" href="/img/articles/{{article.path}}"><img src="/img/articles/{{article.path}}" width="32" height="32" alt=""/></a>
                                    </td> 
                                

                                    <td class="txtLeft">{{article.nomArticle}}</td>
                                    <td class="txtLeft">{{article.description}}</td>
                                    <td class="txtCenter">{{article.categorie}}</td>
                                    <td class="txtCenter">{{article.prix}}</td>
                                    <td class="txtCenter">{{article.etat}}</td>
                                    <td class="txtCenter" id="task1">
                                        <a href="{{path('caisse_modifier_article',{id:article.id})}}">
                                            <img src="/img/edit.png" width="16" height="16" title="Modifier l'article" style="margin:1px;"/>
                                        </a> 

                                        <a href="{{path('caisse_supprimer_article',{id:article.id})}}" onClick="return confirm(\''.$LANG['alert_pr_del'].'\');">
                                            <img src="/img/delete.png" width="16" height="16" title="Supprimer l'article" style="margin:1px;"/>
                                        </a>
                                    </td> 
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        </p>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="clear"><!-- --></div>
        </div>

        <div class="clr"></div>

    </div>
    <div class="clear"></div>

</div>



{% endblock body %} 